<template>
	<view class="sex-picker-wrapper">
		<u-popup :show="show" @close="close" round="12px">
			<view class="select-date-popup">
				<view class="header-btns">
					<view class="cancel-btn" @click="close">
						<text>取消</text>
					</view>
					<view class="confirm-btn" @click="selectDateConfirm">
						<text>确定</text>
					</view>
				</view>
				<picker-view mask-class="mask-wrap" :indicator-style="indicatorStyle" :value="value"
					@change="bindChange" class="picker-view box">
					<picker-view-column>
						<view class="item" v-for="(item,index) in range" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ['range', 'show'],
		watch: {
			show(val) {
				if (!val) return
				const [v] = this.value
				const target = this.range[v]
				this.currentValue = target
			},
		},
		methods: {
			bindChange(ev) {
				const [value] = ev.detail.value
				const target = this.range[value]
				this.value = [value]
				this.currentValue = target
			},
			selectDateConfirm() {
				this.$emit('confirm', this.currentValue)
			},
			close() {
				this.$emit('close')
			},
		},
		computed: {},
		data() {
			return {
				currentValue: '',
				indicatorStyle: `height: 50px;`,
				value: [0],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sex-picker-wrapper {
		.header-btns {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			align-items: center;

			.cancel-btn {
				color: rgb(25, 25, 25);
			}

			.confirm-btn {
				color: #FFF;
				padding: 12rpx 24rpx;
				border-radius: 32rpx;
				background: rgb(35, 121, 255);

			}
		}

		.picker-view {
			width: 750rpx;
			height: 400rpx;
		}

		.item {
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>